<template>
  <el-button type="primary" @click="dialogVisible = true">添加课程</el-button>
  <el-table :data="course" style="width: 100%">
    <el-table-column label="id" prop="id" />
    <el-table-column label="名称" prop="name" />
    <el-table-column label="学时" prop="time" />
    <el-table-column label="学分" prop="point" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="keyword" size="small" placeholder="搜索课程" />
      </template>
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加课程弹窗 -->
  <el-dialog v-model="dialogVisible" title="添加课程" width="30%">
    <el-form :model="newCourse" label-width="80px">
      <el-form-item label="课程ID">
        <el-input v-model="newCourse.id" />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="newCourse.name" />
      </el-form-item>
      <el-form-item label="学时">
        <el-input v-model="newCourse.time" />
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="newCourse.point" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addCourse">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "CourseView",
  data(){
    return{
      course:[],
      keyword:'',
      dialogVisible:false,//控制弹窗显示
      newCourse:{
        id:'',
        name:'',
        time:'',
        point:''
      }
    }
  },
  methods:{
    loadCourse(){
      this.$axios.get('/findCourse')
          .then(result => {
            console.log(result.data)
            if(result.data.code === 200){
              this.course = result.data.data;
            }
          })
    },    addCourse() {
      // 发送 POST 请求到后端
      this.$axios.post('/addcourse', this.newCourse, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头这种格式是表单提交的默认格式
        },
        transformRequest: [function (data) {
          // 将对象转换为 URL 编码格式
          let params = new URLSearchParams();//使用 URLSearchParams 将对象的键值对转换为 key=value 的形式。例如，{ id: 1, name: 'Java' } 会被转换为 id=1&name=Java
          for (let key in data) {
            params.append(key, data[key]);
          }
          return params;
        }]
      })
          .then(result => {
            console.log("Response from server:", result.data);
            if (result.data.code === 200) {
              this.$message.success('课程添加成功！');
              this.dialogVisible = false; // 关闭弹窗
              this.newCourse = { id: '', name: '', time: '', point: '' }; // 清空表单
              this.loadCourse();
            } else {
              this.$message.error('课程添加失败！');
            }
          })
          .catch(error => {
            console.error("添加课程失败:", error);
            this.$message.error('课程添加失败！');
          });
    }
  },
  mounted() {
    this.loadCourse()
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
</style>